<template>
  <div class="weekend">
    <div class="title">周末去哪儿</div>
    <ul class="weekend-list">
      <li class="weekend-item" v-for="item in weekendList" :key="item.id">
        <div class="top">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="bottom">
          <p class="location">{{item.title}}</p>
          <p class="desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    props: {
      weekendList: Array
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .weekend
    .title
      padding .24rem 0 .26rem .24rem
      background #f5f5f5
      font-size .25rem
    .weekend-list
      .weekend-item
        padding .2rem 0
        .top
          img
            display block
        .bottom
          padding-left .2rem
          .location
            margin-top .2rem
            font-size .32rem
            line-height: .44rem
          .desc
            margin-top .1rem
            color #aaa
            font-size .2rem
</style>
